<template>
  <h2>watch侦听器</h2>
  <button @click="a++"> a = {{a}}</button><br><br>
  <button @click="b++"> b = {{b}}</button>
</template>

<script>
import {reactive, ref, toRefs, watch, watchEffect} from "vue";

export default {
  name: "Watch",
  // setup(){
  //   let a = ref(10);
  //   let b = ref(20);
  //   // watch(()=>{
  //   //   console.log(a.value + '我是侦听器' + b.value);
  //   // })
  //   // watchEffect(()=>{
  //   //   console.log(a.value + '我也是侦听器' + b.value);
  //   // })
  //   //监听指定以及监听数据的新值和旧值
  //   watch([a,b],([newa,newb],[olda,oldb])=>{
  //     console.log('a被监听：' + a.value);
  //     console.log('b被监听：' + b.value);
  //     console.log('a的新值：' + newa + '---------' + 'a的旧值：' + olda);
  //     console.log('b的新值：' + newb + '^^^^^^^^^^^^^^^^^^' + 'b的旧值：' + oldb);
  //   },{immediate:true})//是否初始化，第一次就被监听
  //   return{
  //     a,
  //     b
  //   }
  // }
  //对象方法
  setup(){
    const user = reactive({
      a:15,
      b:25
    });
    // watchEffect(()=>{
    //   console.log(user.a + '-----' + user.b);
    // },{immediate:true})
    watch([()=>user.a,()=>user.b],([newa,newb],[olda,oldb])=>{
      console.log(user.a + '$$$$$$$$' + user.b);
      console.log(newa + '######' + olda);
      console.log(newb + '----------' + oldb);
    },{immediate:true});
    return{
      ...toRefs(user)
    }
  }
}
</script>

<style scoped>

</style>